<template>
  <div>
    <div class="hellow-container">
      <div class="chatEditor_" id="chatEditor_">
        <div style="width:100%;height:100%;min-width:300px;position: relative;text-align: left;">
          <div class="chat-top">
            <el-popover placement="top" width="485" trigger="click" @show="openEmoji" v-model="emojiDialog" popper-class="emoji-popper">
              <emoji @handleEmotion="expressionClick"></emoji>
              <span id="webWechatFace" class="web_wechat_face Iclick" slot="reference">😀</span>
            </el-popover>
            <i id="webWechatPic" class="el-icon-folder-opened web_wechat_pic Iclick" @click="webWechatPicClick"></i>
            <input multiple type="file" id="uploadFile" style="display: none" @change="uploadFile" />
          </div>
          <at :members="members" :name-key="'nickName'" ref="at" @memberHover="memberHover">
            <span slot="embeddedItem" slot-scope="s" :id="s.current.account">
              @{{ s.current.nickName }}
            </span>
            <!-- custom: with avatars -->
            <template slot="item" slot-scope="s">
              <img :src="s.item.headUrl">
              <span v-text="s.item.nickName" class="atwho-name" id="atwhoId"></span>
            </template>
            <pre id="preId" class="pre_message" contenteditable="true" ref="editor" @keydown.enter.prevent="preIdKeydown" @keyup="getCursor" @click="getCursor" @blur="getCursor" @paste.prevent="onPaste"></pre>
          </at>
          <div class="send-button">
            <button id="sendMsg" @click="sendMsgClick">
              发送消息
            </button>
          </div>
        </div>
      </div>
      <!-- 0-0000000000000000000000 -->
    </div>
  </div>
</template>
<script>
import emoji from './emoji'
import chatScreen from './chatScreen'
import at from './At.vue'
export default {
  components: { emoji, at },
  data () {
    return {
      emojiDialog: false,
      isAt: false,
      members: [{
        id: 85817152718579,
        roomId: 85817152718575,
        roomNo: 100000793,
        admin: 2,
        forbidden: 0,
        account: 998910,
        name: '德玛光辉亚',
        nickName: '德玛光辉亚',
        headUrl: 'https://maint.deeptel.com.cn/upload/hardware/202010/image/m4fre6aks9.png',
        defaultHeader: false,
        sex: 0,
        delete: 0
      }, {
        id: 85817324685289,
        roomId: 85817152718575,
        roomNo: 100000793,
        admin: 0,
        forbidden: 0,
        account: 103936,
        name: '李响',
        nickName: '李响',
        headUrl: 'https://maint.deeptel.com.cn/upload/app/27955/2020_1028_0014_9e0HY8.jpg',
        defaultHeader: false,
        sex: 0,
        delete: 0
      }, {
        id: 85817152718576,
        roomId: 85817152718575,
        roomNo: 100000793,
        admin: 0,
        forbidden: 0,
        account: 248552,
        name: '测试员0001',
        nickName: '测试员0001',
        headUrl: 'https://maint.deeptel.com.cn/upload/hardware/202005/image/05qem5pkwk.png',
        defaultHeader: false,
        sex: 0,
        delete: 0
      }, {
        id: 85817152718577,
        roomId: 85817152718575,
        roomNo: 100000793,
        admin: 0,
        forbidden: 0,
        account: 336975,
        name: '冯帅哥',
        nickName: '冯帅哥',
        headUrl: 'https://maint.deeptel.com.cn/upload/app/28609/2020_0910_1715_3kJ4u9.jpg',
        defaultHeader: false,
        sex: 0,
        delete: 0
      }, {
        id: 85817152718578,
        roomId: 85817152718575,
        roomNo: 100000793,
        admin: 0,
        forbidden: 0,
        account: 594153,
        name: 'yhq002',
        nickName: 'yhq002',
        headUrl: 'https://maint.deeptel.com.cn/upload/hardware/202005/image/a5md0d499r.png',
        defaultHeader: false,
        sex: 0,
        delete: 0
      }, {
        id: 85817184175886,
        roomId: 85817152718575,
        roomNo: 100000793,
        admin: 0,
        forbidden: 0,
        account: 1002083,
        name: '空聊客服',
        nickName: '空聊客服',
        headUrl: 'https://maint.deeptel.com.cn/upload/app/85811152765675/2020_1124_1516_gXWRZk.jpg',
        defaultHeader: false,
        sex: 0,
        delete: 0
      }]
    }
  },
  methods: {
    memberHover (val) {
      this.isAt = val
      chatScreen.changeAt(val)
    },
    sendMsg (val) {
      console.log(val, 1239999)
    },
    membersClick () {
      chatScreen.membersClick(this.members[0])
    },
    onPaste (e) {
      chatScreen.onPaste(e)
    },
    getCursor: chatScreen.getCursor,
    openEmoji: chatScreen.openEmoji,
    expressionClick: chatScreen.expressionClick,
    webWechatPicClick: chatScreen.webWechatPicClick,
    uploadFile: chatScreen.uploadFile,
    preIdKeydown: chatScreen.preIdKeydown((msgArr, fileArr) => {
      chatScreen.initializeEmpty()
      chatScreen.sendmsg({ msgArr, fileArr })
    }),
    sendMsgClick: chatScreen.sendMsgClick((msgArr, fileArr) => {
      chatScreen.initializeEmpty()
      chatScreen.sendmsg({ msgArr, fileArr })
      console.log(msgArr, fileArr, '12300000000')
    }),
    sendVideo: chatScreen.sendVideo((file) => {
      console.log(file, '12300000000')
      chatScreen.initiaVideo()
      chatScreen.sendvideo(file)
    }),
    // expressionClick: chatEditor.expressionClick,
    // sendMsgClick: chatEditor.sendMsgClick,
    // getCursor: chatEditor.getCursor,
    // preIdKeydown () { },
    // uploadFile: chatEditor.uploadFile,
    // webWechatPicClick: chatEditor.webWechatPicClick,
    // openEmoji: chatEditor.openEmoji,
    voice (file) {
      chatScreen.sendaudio(file)
    }
  },
  mounted () {
    setTimeout(() => {
      chatScreen.onload()
    }, 200)
    const c = [{

      id: '1',

      childList: [{

        id: '1-1',

        childList: [{

          id: '1-1-1'

        }, {

          id: '1-1-2'

        }]

      },

      {

        id: '1-2',

        childList: null

      }]

    }, {

      id: '2',

      childList: [

        {

          id: '2-2',

          childList: [{

            id: '2-2-1'

          }]

        }]

    }, {

      id: '3',

      childList: null

    }]

    const d = [

      {

        id: '1-1-1',

        name: '1/1-1/1-1-1'

      },

      {

        id: '1-1-2',

        name: '1/1-1/1-1-2'

      },

      {

        id: '1-2',

        name: '1/1-2'

      },

      {

        id: '2-2-1',

        name: '2/2-2/2-2-1'

      },

      {

        id: '3',

        name: '3'

      }

    ]

    console.log(c, d)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.send-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 5px;
}
.hellow-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  height: 100%;
}
.chatEditor_ {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #bebebe;
}
.chat-top {
  border-bottom: 1px solid #ededed;
  padding: 5px;
}
.pre_message {
  position: relative;
  img {
    max-height: 50px;
  }
}
.hello {
  margin-top: 50px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.tag {
  border-radius: 5px;
  background: beige;
  border: 1ps outset yellow;
}
.editor {
  width: 400px;
  height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  border: solid 2px rgba(0, 0, 0, 0.5);
}

.avatar {
  max-width: 1em;
  vertical-align: middle;
}
textarea {
  padding: 0;
  font-size: inherit;
  resize: none;
}

/* override styles */
#app .atwho-li {
  padding: 0 4px;
}
#app .atwho-li img {
  height: 100%;
  width: auto;
  -webkit-transform: scale(0.8);
}
#app .atwho-li span {
  padding-left: 8px;
}
#recording,
#sendMsg {
  width: 90px;
  height: 30px;
  border-radius: 5px;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  background-color: #fff;
  color: #222;
  border: 1px solid #c1c1c1;
  outline: none;
}
#recording:active,
#sendMsg:active {
  color: #3385ff;
  border: 1px solid #3385ff;
}
</style>

